<template>
	<div class="page">
		<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<!-- <el-form-item prop="fixed.id">
				<GridSelect title="选择固定资产" placeholder="请选择固定资产" labelName='assetsName' labelValue='id'
					:value="searchForm.fixed.id" :limit="1" size="small"
					@getValue='(value) => {searchForm.fixed.id=value}' :columns="[
                    {
                      prop: 'id',
                      label: '主键'
                    }
                    ]" :searchs="[
                    {
                      prop: 'assetsName',
                      label: '资产名称'
                    }
                    ]" dataListUrl="/dlyrl.oa/fixedassets/fixedAssets/list" entityBeanName="fixedAssets"
					queryEntityUrl="/dlyrl.oa/fixedassets/fixedAssets/queryById">
				</GridSelect>
			</el-form-item> -->
      <el-form-item prop="assetsName">
				<el-input size="small" v-model="searchForm.assetsName" placeholder="资产名称" clearable></el-input>
			</el-form-item>
      <el-form-item prop="assetsNumber">
				<el-input size="small" v-model="searchForm.assetsNumber" placeholder="资产编号" clearable></el-input>
			</el-form-item>
      <el-form-item prop="user.id">
				<user-select :limit='1' size="small" placeholder="请选择使用人" :value="searchForm.user.id"
					@getValue='(value) => {searchForm.user.id=value}'></user-select>
			</el-form-item>
			<el-form-item prop="isrepair">
				<el-select v-model="searchForm.isrepair" placeholder="请选择维修状态" size="small" style="width: 100%;">
					<el-option v-for="item in $dictUtils.getDictList('yes_no')" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="refreshList()" size="small">查询</el-button>
				<el-button @click="resetSearch()" size="small">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 导入导出-->
		<el-dialog title="导入Excel" :visible.sync="isImportCollapse">
			<el-form size="small" :inline="true" v-show="isImportCollapse" ref="importForm">
				<el-form-item>
					<el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
				</el-form-item>
				<el-form-item prop="loginName">
					<el-upload class="upload-demo"
						:action="`${this.$http.BASE_URL}/dlyrl/oa/fixedrepair/fixedRepair/import`"
						:on-success="uploadSuccess" :show-file-list="true">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
					</el-upload>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div class="bg-white top">
			<el-row>
				<!-- <el-button v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:add')" type="primary" size="small"
					icon="el-icon-plus" @click="add()">新建</el-button>
				<el-button v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:edit')" type="warning" size="small"
					icon="el-icon-edit-outline" @click="edit()" :disabled="dataListSelections.length != 1" plain>修改
				</el-button>
				<el-button v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:del')" type="danger" size="small"
					icon="el-icon-delete" @click="del()" :disabled="dataListSelections.length <= 0" plain>删除
				</el-button> -->
				<el-button-group class="pull-right">
					<el-button v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:import')" type="default"
						size="small" icon="el-icon-upload2" title="导入" @click="isImportCollapse = !isImportCollapse">
					</el-button>
					<el-button v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:export')" type="default"
						size="small" icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
					<el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
					</el-button>
				</el-button-group>
			</el-row>
			<el-table :data="dataList" size="small" height="calc(100% - 80px)" @selection-change="selectionChangeHandle"
				@sort-change="sortChangeHandle" v-loading="loading" :cell-style="cellStyle"
				style="border:1px solid #d6cfe2;" :header-cell-class-name="cellHeadStyle"
				:row-class-name="tableRowClassName" class="table">
				<el-table-column type="selection" header-align="center" align="center" width="50">
				</el-table-column>
				<!-- <el-table-column prop="fixed.assetsName" show-overflow-tooltip sortable="custom" label="固定资产">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false"
							v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:edit')" @click="edit(scope.row.id)">
							{{scope.row.fixed.assetsName}}</el-link>
						<el-link type="primary" :underline="false"
							v-else-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:view')"
							@click="view(scope.row.id)">{{scope.row.fixed.assetsName}}</el-link>
						<span v-else>{{scope.row.fixed.assetsName}}</span>
					</template>
				</el-table-column> -->
        <el-table-column prop="fixed.assetsSort" show-overflow-tooltip sortable="custom" label="资产类型">
						</el-table-column>
				<el-table-column prop="fixed.assetsNumber" show-overflow-tooltip sortable="custom" label="资产编号">
						</el-table-column>
				<el-table-column prop="fixed.assetsName" show-overflow-tooltip sortable="custom" label="资产名称">
						</el-table-column>
            <el-table-column prop="user.name" show-overflow-tooltip sortable="custom" label="保修人">
					<!-- <template slot-scope="scope">
						<el-link type="primary" :underline="false"
							v-if="hasPermission('dlyrl:oa:assetsmaterial:assetsMaterial:edit')"
							@click="edit(scope.row.id)">{{scope.row.user.name}}</el-link>
						<el-link type="primary" :underline="false"
							v-else-if="hasPermission('dlyrl:oa:assetsmaterial:assetsMaterial:view')"
							@click="view(scope.row.id)">{{scope.row.user.name}}</el-link>
						<span v-else>{{scope.row.user.name}}</span>
					</template> -->
				</el-table-column>
				<el-table-column prop="faultpicture" show-overflow-tooltip sortable="custom" label="故障图片">
					<template slot-scope="scope" v-if="scope.row.faultpicture">
						<el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
							v-for="(src, index) in scope.row.faultpicture.split('|')" :key="index"
							:preview-src-list="scope.row.faultpicture.split('|')">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="faultcontent" show-overflow-tooltip sortable="custom" label="故障描述">
				</el-table-column>
				<el-table-column prop="repairpicture" show-overflow-tooltip sortable="custom" label="修复图片">
					<template slot-scope="scope" v-if="scope.row.repairpicture">
						<el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
							v-for="(src, index) in scope.row.repairpicture.split('|')" :key="index"
							:preview-src-list="scope.row.repairpicture.split('|')">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="repaircontent" show-overflow-tooltip sortable="custom" label="修复描述">
				</el-table-column>
				<el-table-column prop="isrepair" show-overflow-tooltip sortable="custom" label="维修状态">
					<template slot-scope="scope">
						{{ $dictUtils.getDictLabel("yes_no", scope.row.isrepair, '-') }}
					</template>
				</el-table-column>
				<el-table-column prop="remarks" show-overflow-tooltip sortable="custom" label="备注">
				</el-table-column>
				<!-- <el-table-column header-align="center" align="center" fixed="right" :key="Math.random()" width="200"
					label="操作">
					<template slot-scope="scope">
						<el-button v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:view')" type="text"
							icon="el-icon-view" size="small" @click="view(scope.row.id)">查看</el-button>
						<el-button v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:edit')" type="text"
							icon="el-icon-edit" size="small" @click="edit(scope.row.id)">修改</el-button>
						<el-button v-if="hasPermission('dlyrl:oa:fixedrepair:fixedRepair:del')" type="text"
							icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<FixedRepairForm ref="fixedRepairForm" @refreshDataList="refreshList"></FixedRepairForm>
	</div>
</template>

<script>
	import FixedRepairForm from './FixedRepairForm'
	import GridSelect from '@/components/gridSelect'
	import tableStyles from '../../../../../utils/mixins.js'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				searchForm: {
					user: {
						id: ''
					},
					fixedAssets: '',
					remandType: '',
					assetsName:'',
					assetsNumber:'',
				},
				dataList: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				orderBy: '',
				dataListSelections: [],
				isImportCollapse: false,
				loading: false
			}
		},
		components: {
			GridSelect,
			FixedRepairForm
		},
		activated() {
			this.refreshList()
		},
		methods: {
			// 获取数据列表
			refreshList() {
				this.loading = true
				this.$http({
					url: '/dlyrl/oa/fixedrepair/fixedRepair/getRepairList',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						'orderBy': this.orderBy,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.loading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},

			// 排序
			sortChangeHandle(obj) {
				if (obj.order === 'ascending') {
					this.orderBy = obj.prop + ' asc'
				} else if (obj.order === 'descending') {
					this.orderBy = obj.prop + ' desc'
				} else {
					this.orderBy = ''
				}
				this.refreshList()
			},
			// 新增
			add() {
				this.$refs.fixedRepairForm.init('add', '')
			},
			// 修改
			edit(id) {
				id = id || this.dataListSelections.map(item => {
					return item.id
				})[0]
				this.$refs.fixedRepairForm.init('edit', id)
			},
			// 查看
			view(id) {
				this.$refs.fixedRepairForm.init('view', id)
			},
			// 删除
			del(id) {
				let ids = id || this.dataListSelections.map(item => {
					return item.id
				}).join(',')
				this.$confirm(`确定删除所选项吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$http({
						url: '/dlyrl/oa/fixedrepair/fixedRepair/delete',
						method: 'delete',
						params: {
							'ids': ids
						}
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg)
							this.refreshList()
						}
						this.loading = false
					})
				})
			},
			// 导入成功
			uploadSuccess(res, file) {
				if (res.success) {
					this.$message.success({
						dangerouslyUseHTMLString: true,
						message: res.msg
					})
				} else {
					this.$message.error(res.msg)
				}
			},
			// 下载模板
			downloadTpl() {
				this.$utils.download('/dlyrl/oa/fixedrepair/fixedRepair/import/template')
			},
			exportExcel() {
				let params = {
					...this.searchForm
				}
				this.$utils.download('/dlyrl/oa/fixedrepair/fixedRepair/export', params)
			},
			resetSearch() {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			}
		}
	}
</script>
